<template>
  <container title="订单列表">
    <template #tips>
      <el-tabs v-model="tabBarName" @tab-click="tabBarClick"  class="title-tab">
        <el-tab-pane v-for="(item, index) in tabBarList" :label="item.label" :name="item.name" :key="index">
        </el-tab-pane>
      </el-tabs>
    </template>


    <div class="main-card" v-loading="loading">
      <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
        <template v-slot:left>
          <el-input placeholder="订单号" class="short" v-model="filter.keyword" clearable size="small" prefix-icon="el-icon-search"
                    style="margin-right:10px;width:200px;">
          </el-input>
          <el-button
              icon="el-icon-search" type="primary" size="small"
              @click="loadDataList(1)">查询
          </el-button>
          <el-button
              icon="el-icon-refresh" size="small"
              @click="$refs.search._reset()">重置
          </el-button>
          <el-button
              type="text"
              @click.stop="$refs.search.show(filter)">
            高级搜索
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
        </template>
        <template v-slot:right>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>
      <div class="data-container tbc-order-list">
        <tbc-dynamic-table
            :data="dataList"
            :span-method="arraySpanMethod"
            :cols="[
            // {type: 'selection', width: 60},
            {label: '商品', prop: 'base', minWidth: 400, className: 'tbc-cell'},
            {label: '单价', prop: 'goods_price', width: 120, align: 'center'},
            {label: '数量', prop: 'goods_number', width: 120, align: 'center'},
            {label: '商品操作', prop: 'goods_operation', width: 120, align: 'center'},
            {label: '实付款', prop: 'order_amount', width: 120, align: 'center'},
            {label: '订单状态', prop: 'order_status_name', width: 120, align: 'center'},
            {label: '操作', width: 100, prop: 'action', fixed: 'right'}]">
          <template v-slot:base="scope">
            <order-list-item :item="scope.row" @showUser="showUser"/>
          </template>
          <template v-slot:order_amount="scope">
            <div style="padding-top: 35px">
              <p>¥{{ scope.row.basic.data.field.order_amount }}</p>
            </div>
          </template>
          <template v-slot:order_status_name="scope">
            <div style="padding-top: 35px">
              <p>{{ scope.row.status.data.field.text }}</p>
            </div>
          </template>
          <template v-slot:action="scope">
            <div style="padding-top: 35px">
              <order-list-item-button :item="scope.row" @operate="onOrderOperate"/>
            </div>
          </template>
        </tbc-dynamic-table>
      </div>
      <tbc-pagination :total="total" @change="loadDataList"/>
    </div>
  </container>
  <order-operation-list ref="operation"/>
  <order-advanced-search ref="search"/>
  <order-detail ref="detail"/>
  <order-modify ref="modify" @success="updateItemInfo"/>
  <order-cancel ref="cancel" @success="updateItemInfo"/>
  <order-payment ref="payment" @success="updateItemInfo"/>
  <order-prepare ref="prepare" @success="updateItemInfo"/>
  <order-delivery ref="deliver" @success="updateItemInfo"/>
  <order-complete ref="complete" @success="updateItemInfo"/>
  <user-detail ref="user"/>
</template>
<script lang="ts">
import {
  defineComponent, defineAsyncComponent, onMounted, toRefs,
  reactive, getCurrentInstance
} from 'vue'
import useOrder from './api/order'

export default defineComponent({
  name: 'order-list',

  components: {
    OrderListItem: defineAsyncComponent(() =>
        import('./components/OrderListItem.vue')),
    OrderListItemButton: defineAsyncComponent(() =>
        import('./components/OrderListItemOperation.vue')),
    OrderOperationList: defineAsyncComponent(() =>
        import('./components/OrderOperationList.vue')),
    OrderAdvancedSearch: defineAsyncComponent(() =>
        import('./components/OrderAdvancedSearch.vue')),
    OrderDetail: defineAsyncComponent(() =>
        import('./OrderDetailDialog.vue')),
    OrderModify: defineAsyncComponent(() =>
        import('./components/OrderModify.vue')),
    OrderCancel: defineAsyncComponent(() =>
        import('./components/OrderCancel.vue')),
    OrderPayment: defineAsyncComponent(() =>
        import('./components/OrderPayment.vue')),
    OrderPrepare: defineAsyncComponent(() =>
        import('./components/OrderPrepare.vue')),
    OrderDelivery: defineAsyncComponent(() =>
        import('./components/OrderDelivery.vue')),
    OrderComplete: defineAsyncComponent(() =>
        import('./components/OrderComplete.vue')),
    UserDetail: defineAsyncComponent(() =>
        import('@/views/user/UserInfoDialog.vue')),
  },

  setup() {
    const order = useOrder()
    const instance = getCurrentInstance()
    const state = reactive({
      tabBarList: [
        {value: '', label: '全部', name: '0'},
        {value: 1100, label: '待支付', name: '1100'},
        {
          value: 1200,
          label: '已取消',
          name: '1200'
        }, {
          value: 1300,
          label: '待发货',
          name: '1300'
        }, {value: 1500, label: '退款中', name: '1500'}],
      tabBarIndex: 0,
      tabBarValue: '',
      tabBarName: '0'
    })
    const arraySpanMethod = ({columnIndex}: { columnIndex: number }): number[] | void => {
      if (columnIndex === 0) {
        return [1, 4];
      } else if (columnIndex > 0 && columnIndex < 4) {
        return [0, 0];
      }
    }

    const tabBarClick = (tab) => {
      (order.filter.value.order_status as any) =
          state.tabBarList[tab.index].value
      order.loadDataList(1)
    }


    onMounted(() => {
      order.loadDataList(1)
    })


    // 订单操作
    const onOrderOperate = (order: Record<string, any>, operation: { [k: string]: string }) => {
      console.log(operation);
      ((instance as any).refs[operation.code] as HTMLFormElement).show(order)
    }

    // 显示用户
    const showUser = (user: { user_id: string }) => {
      console.log(user);
      ((instance as any).refs.user as HTMLFormElement).show(user)
    }

    //
    const updateItemInfo = async (data: { [k: string]: string }) => {
      const res = await order.getInfo(data.order_sn)
      if (res.data.code !== 0) return
      let index = (order.dataList.value as any).findIndex((item: Record<string, any>) => {
        return item.basic.data.field.order_sn === data.order_sn
      });
      (order.dataList.value as any).splice(index, 1, res.data.data)
    }

    return {
      ...toRefs(state),
      ...order,
      arraySpanMethod,
      tabBarClick,
      onOrderOperate,
      showUser,
      updateItemInfo
    }
  }
})
</script>
<style>
.tbc-order-list .el-table td {
  vertical-align: top;
  padding: 12px 0;
}

.el-tabs__header {
  margin-bottom: 1px
}

.el-tabs__nav-wrap::after {
  height: 0
}
</style>